<template>
  <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height: 100vh"
      default-active="/Home"
      :collapse="iscollapse"
      :collapse-transition="false"
      router
  >
    <el-menu-item index="/Home">
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>

    <el-menu-item
        :index="`/${item.menuClick}`"
        v-for="(item, i) in menu"
        :key="i"
    >
      <!-- 动态图标渲染 -->
      <el-icon>
        <template v-if="item.menuName === '管理员管理'">
          <Avatar />
        </template>
        <template v-else-if="item.menuName === '用户管理'">
          <User />
        </template>
        <template v-else-if="item.menuName === '仓库管理'">
          <OfficeBuilding />
        </template>

      </el-icon>
      <template #title>{{ item.menuName }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script>
import {ElIcon} from "@element-plus/icons-vue"; // 引入ElTooltip组件

export default {
  name: 'Aside',
  components: {
    ElIcon
  },
  props: {
    iscollapse: Boolean
  },
  data() {
    return {

      menu: [
        {
          menuClick: 'Admin',
          menuName: '管理员管理',
          path: '/home',
        },
        {
          menuClick: 'User',
          menuName: '用户管理',
          path: '/index',
        },
        {
          menuClick: 'Storage',
          menuName: '仓库管理',
          path: '/Stroage',
        },

      ],
    };
  },
};
</script>